<!-- @Author: Yu_Bo -->
<template>
	<view class="student" :style="[pageStyle]">
		<!-- nav -->
		<c-navbar navtype='student'></c-navbar>
		<!-- background -->
		<view class="page_background"></view>
		<!-- main -->
		<view class="student_main">
			<view class="student_txt" @click="collegeShow = true">
				<view class="left">
					选择学院
				</view>
				<view class="right" :class="college?'':'right_color'">
					{{college || "请选择学院"}}
					<image src="@/static/images/img/right_icon.png" mode=""></image>
				</view>
			</view>
			<view class="student_txt" @click="gradeShow = true">
				<view class="left">
					选择年级
				</view>
				<view class="right" :class="grade?'':'right_color'">
					{{grade || "请选择年级"}}
					<image src="@/static/images/img/right_icon.png" mode=""></image>
				</view>
			</view>
			<view class="student_txt" @click="specialityShow = true">
				<view class="left">
					选择专业
				</view>
				<view class="right" :class="speciality?'':'right_color'">
					{{speciality || "请选择专业"}}
					<image src="@/static/images/img/right_icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<c-footer>
			<view class="footer_btn">
				<view class="btn_txt color_right page_button" @click="submitBtn">
					<u-loading v-if="loding" mode="flower" color="#ffffff"></u-loading>
					提交
				</view>
			</view>
		</c-footer>
		<!-- 选择学院 -->
		<u-select 
			title="选择学院"
			v-model="collegeShow" 
			value-name="id" 
			label-name="name" 
			:default-value="collegeValue" 
			:list="collegeList"
			@confirm="collegeConfirm">
		</u-select>
		<!-- 选择年级 -->
		<u-select 
			title="选择年级"
			v-model="gradeShow" 
			value-name="id"
			label-name="name" 
			:default-value="gradeValue" 
			:list="gradeList"
			@confirm="gradeConfirm">
		</u-select>
		<!-- 选择专业 -->
		<u-select 
			title="选择专业"
			v-model="specialityShow" 
			value-name="id"
			label-name="name" 
			:default-value="specialityValue" 
			:list="specialityList"
			@confirm="specialityConfirm">
		</u-select>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return {
				college: this.$store.state.userinfo?.college || "",
				college_id: this.$store.state.userinfo?.college_id || "",
				collegeShow: false,
				grade: this.$store.state.userinfo?.grade || "",
				grade_id: this.$store.state.userinfo?.grade_id || "",
				gradeShow: false,
				speciality: this.$store.state.userinfo?.speciality || "",
				speciality_id: this.$store.state.userinfo?.speciality_id || "",
				specialityShow: false,
				// 
				loding: false,
			}
		},
		computed: {
			...mapState({
				collegeList: (state) => state.collegeList,
				gradeList: (state) => state.gradeList,
				// specialityList: (state) => state.specialityList,
			}),
			pageStyle() {
				return {
					'--pagebackground': "url(" + require('@/static/images/img/student_nav_bg.png') + ")"
				}
			},
			collegeValue() {
				if(this.college_id) {
					var index = this.collegeList.findIndex((item) => item.id == this.college_id)
					return [index]
				} else {
					return []
				}
			},
			gradeValue() {
				if(this.grade_id) {
					var index = this.gradeList.findIndex((item) => item.id == this.grade_id)
					return [index]
				} else {
					return []
				}
			},
			specialityList() {
				if(this.college_id) {
					var index = this.collegeList.findIndex((item) => item.id == this.college_id)
					if(index == -1) {
						return []
					} else {
						return this.collegeList[index].speciality
					}
				} else {
					return []
				}
			},
			specialityValue() {
				if(this.speciality_id) {
					var index = this.specialityList.findIndex((item) => item.id == this.speciality_id)
					return [index]
				} else {
					return []
				}
			},
		},
		onLoad() {
		},
		onShow() {},
		methods: {
			// 保存
			submitBtn() {
				var that = this
				if(that.college_id == "") {
					that.$tips.showToast('请选择学院')
					return
				}
				if(that.grade_id == "") {
					that.$tips.showToast('请选择年级')
					return
				}
				if(that.speciality_id == "") {
					that.$tips.showToast('请选择专业')
					return
				}
				if(that.loading) return
				that.loding = true
				var params = {
					college_id: that.college_id,
					grade_id: that.grade_id,
					speciality_id: that.speciality_id,
				}
				that.$httpApi.student(params).then((res) => {
					that.loding = false
					if (res.code == 1) {
						that.$tips.showToast(res.msg)
						this.$store.dispatch('getUserInfo')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			},
			// 选择学院
			collegeConfirm(arr) {
				this.college = arr[0].label
				this.college_id = arr[0].value
				this.speciality = ""
				this.speciality_id = ""
			},
			// 选择年级
			gradeConfirm(arr) {
				this.grade = arr[0].label
				this.grade_id = arr[0].value
			},
			// 选择专业
			specialityConfirm(arr) {
				this.speciality = arr[0].label
				this.speciality_id = arr[0].value
			},
		},
	}
</script>

<style lang='scss' scoped>
	.student {
		width: 100%;
		
		.student_main {
			position: fixed;
			top: 400rpx;
			left: 0;
			z-index: 2;
			width: 100%;
			padding: 40rpx 30rpx;
			background: #ffffff;
			border-radius: 30rpx 30rpx 0 0;
		
			.student_txt {
				width: 100%;
				height: 112rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
				
				.right {
					width: 450rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					
					image {
						display: block;
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
				
				.right_color {
					color: #999999;
				}
			}
		}
	}
	
	.footer_btn {
		width: 100%;
		padding: 30rpx 30rpx;
		background: #fff;
		
		.btn_txt {
			width: 100%;
			height: 90rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>